<template>
  <div>
    <el-container>
      <el-header class="header">
        <h2>七点-buy-后台管理</h2>
      </el-header>
      <el-container>
        <el-aside class="aside" width="200px">
          <el-row>
            <el-col :span="24">
              <el-menu
                active-text-color="#ffd04b"
                background-color="#545c64"
                default-active="2"
                text-color="#fff"
                :router="false"
                @select="handlerSelect"
              >
                <template v-for="menu in menus" :key="menu.name">
                  <el-sub-menu :index="menu.path"  v-if="menu.children!=undefined && menu.children.length > 0">
                    <template #title><span>{{menu.meta.title}}</span></template>
                    <template v-if="menu.children!=undefined && menu.children.length > 0">
                      <template v-for="subMenu in menu.children" :key="subMenu.name" >
                        <el-sub-menu  v-if="subMenu.children!=undefined && subMenu.children.length > 0">
                          <template #title><span>{{subMenu.meta.title}}</span></template>
                          <template  v-for="smenu in subMenu.children" :key="smenu.name">
                            <el-menu-item :index="smenu.path">{{smenu.meta.title}}</el-menu-item>
                          </template>
                        </el-sub-menu>
                        <el-menu-item v-else :index="subMenu.path">{{subMenu.meta.title}}</el-menu-item>
                      </template>
                    </template>
                  </el-sub-menu>
                  <el-menu-item v-else :index="menu.path">{{menu.meta.title}}</el-menu-item>
                </template>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main class="main">
          <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" @tab-click="tabClick">
            <el-tab-pane index="index" name="index" label="首页"></el-tab-pane>
            <el-tab-pane
                v-for="item in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
                closable
                @tab-remove="removeTab"
                @tab-click="tabClick"
                >
            </el-tab-pane>
          </el-tabs>
            <keep-alive>
              <router-view ></router-view>
            </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import router from "../router";
export default {
  data() {
    return {
      editableTabsValue:"welcome",
      editableTabs:[
        
      ],
      menus:[]
    }
  },
  methods: {
    /**
     * 菜单的激活事件监听
     * @param index 菜单的唯一标志，我们这里放的就是对应的路由路径
     * @param indexPath 一个数组，包含了菜单的父菜单的路径和当前菜单的路径
     * @param item 一个对象，包含了菜单的几乎所有的信息
     * @param routeResult
     */
    handlerSelect(index, indexPath, item, routeResult) {
      // 这里可以进行编程式路由
      this.$router.push(index); // 跟写router-link标签一样的
      if(index == "/index"){
        this.editableTabsValue="index";
        return;
      }
      // 添加或者筛选一个标签
      this.addTab(index);
    },
    // 单机选项卡
    tabClick(tab){
      console.log(tab);
      this.editableTabsValue = tab.props.name;
      this.$router.push("/"+tab.props.name);
    },
    // 删除tab
    removeTab(tabName){
      let currTab = undefined;
      let flag = true;
      this.editableTabs = this.editableTabs.filter(e=>{
        
        if(e.name == tabName){
          flag = false;
          return false;
        }else{
          if(flag){
            currTab = currTab;
          }
          return true;
        }
        
      });
      if(currTab == undefined){
          currTab = "index"
        }
      this.editableTabsValue = currTab;
      this.$router.push("/"+currTab);
    },
    //新增tab
    addTab(index) {
      // console.log(index);
      // console.log(this.menus);
      for(let i = 0;i < this.rs.length;i++){
        let route = this.rs[i];
        // console.log(route);
        // console.log(route.path,index);
        if(route.path == index){
          // console.log(123123);
          let exists = false;
          for(let x = 0;x < this.editableTabs.length;x ++){
            let tabObj = this.editableTabs[x];
            if(tabObj.name == route.name){
              this.editableTabsValue = tabObj.name;
              exists = true;
              break;
            }
          }
          if(!exists){
            console.log(route);
            this.editableTabs.push({
              path:route.path,
              name:route.name,
              title:route.meta.title
            });
            console.log(this.editableTabs);
            this.editableTabsValue = route.name
          }
        }
      }
    }

  },mounted(){
    this.rs = router.getRoutes();
    this.menus = router.options.routes;
  }
};
</script>

<style scopde>
.header {
  background-color: #545c64;
  color: aliceblue;
}
.aside {
  margin-top: 5px;
  border: 1px solid #545c64;
}
.main {
  margin-top: 5px;
  border: 1px solid #545c64;
  min-height: 600px;
}
</style>